<template>
  <div class="infinite-list-wrapper" style="overflow: auto">
    <ul
      v-infinite-scroll="load"
      class="list"
    >
      <!-- <li v-for="i in count" :key="i" class="list-item">{{ i }}</li> -->
      <slot></slot>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="noMore"><el-empty description="没有啦！"></el-empty></p>
  </div>
</template>

<script>
// import { ref } from 'vue'
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    noMore: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    const load = () => {
      console.log(1)
      emit('infinie')
    }
    // watch(() => {})

    return { load }
  }
}
</script>

<style lang="less" scoped>
.infinite-list-wrapper {
  padding-bottom: 30px;
  height: 1200px;
  width: 100%;
  text-align: center;
  // display: flex;
  .list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }

  // .list-item {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   height: 50px;
  //   background: var(--el-color-danger-lighter);
  //   color: var(--el-color-danger);
  //   & + .list-item {
  //     margin-top: 10px;
  //   }
  // }
}
</style>
